<template>
<div class="main">
    <div class="main-span">商会企业</div>
   <el-carousel :interval="3000" arrow="always" trigger="click" indicator-position="none" direction="vertical">
    <el-carousel-item v-for="(item) in company" :key="item.index">
    <div class="swiper-bgbox" @click="swiperdetail(item)">
      <div class="swiper"><img style="width: 100%;height: 100%;" :src="item.companyLogo" alt=""></div>
      <div class="text-flot">
       <div style="margin-bottom:10px"> {{item.companyName}}</div>
       <div class="swiper-text"> {{item.companyDescription}}</div>
      </div>
    </div>
    </el-carousel-item>
  </el-carousel>
     <el-carousel :interval="3000" arrow="always" trigger="click" indicator-position="none" direction="vertical">
    <el-carousel-item v-for="(items) in reversdata" :key="items.index">
    <div class="swiper-bgbox" @click="swiperdetail(items)">
      <div class="swiper"><img style="width: 100%;height: 100%;" :src="items.companyLogo" alt=""></div>
      <div class="text-flot">
       <div style="margin-bottom:10px"> {{items.companyName}}</div>
       <div class="swiper-text"> {{items.companyDescription}}</div>
      </div>
    </div>
    </el-carousel-item>
  </el-carousel>
  <!-- 弹框 -->
   <Swiper :swiperdata="openswiperdata" :openswiper="openswiperrpop" @openswiperrpopFn="openswiperrpopFn" v-if="openswiperdata"></Swiper> 
</div>
</template>


<script>
import {selectCompany,selectMoneyNum} from "@/api/bigscreen/bigscreen.js";
 import Swiper from "../swiperprop/swiperprop.vue";
export default {
  name:"caroucel",
  components: {
    Swiper
  },
  data() {
    return {
      company:[],
      pageNum:1,//当前页,
      pageSize:10,//每页显示条数,
      reversdata:[],
      openswiperdata:[],
      openswiperrpop:false
    };
  },
  mounted(){
    this.getCompany();

  },
  methods:{
    getCompany(){
      const params = {
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
      selectCompany(params).then(res=>{
        // console.log(res,'轮播图，http://localhost/dev-api/system/company/list?pageNum=1&pageSize=10')
        if(res.code === 200) {
          // 对数组中的luobo图进行处理
          res.rows.forEach((item) => {
            // console.log(item,'item')
            const logourl = 'https://qrcode.qgfhrz.cn:81/prod-api'
            item.companyLogo = logourl + item.companyLogo
          })
         this.company = res.rows;
         this.reversdata = res.rows.reverse()
        }
      })
    },
  // 查看轮播图方法
  swiperdetail(item) {
     const itemarray = []
     const obj = {}
     obj.companyName = item.companyName
     obj.companyLogo = item.companyLogo
     obj.companyDescription = item.companyDescription
    itemarray.push(obj)
    this.openswiperrpop = true
    this.openswiperdata = itemarray
   
  },
   openswiperrpopFn(e){
   this.openswiperdata = e
  }
  }
};
</script>

 <style lang="scss">
.main {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  .main-span {
    margin-bottom: 15px;
    color: aqua;
  }
  .el-carousel {
  flex: 1;
}

.swiper-bgbox {
  display: flex;
  flex-direction: row;
  // background-color: rgba(100, 155, 212, 0.4);
   background-color: rgba(8, 20, 59, 0.4);
  padding: 15px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
    flex: 1;
  color: aliceblue;
  .swiper {
    width: 150px;
  height: 100px;
  margin-right: 10px;

  & >  img {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
  }
  }
  .text-flot {
   padding: 20px ;
  flex: 1;

  }
  .swiper-text {

      display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;
  }
}
}
.el-carousel__container {
  height: 100%;
}
.el-carousel__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
